<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>Signin Template for Bootstrap</title>
        <!-- Bootstrap core CSS -->
        <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
        <!-- Custom styles for this template -->
        <link th:href="@{/css/signin.css}" rel="stylesheet">

        <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#username").blur(function () {
                    var username = this.value;
                    // $.get("/user/ajaxreg/"+username,function (data) {
                    //     alert("data="+data);
                    //     $("#msg").text(data);
                    // });
                    if (username != null && username != "") {
                        $.ajax({
                            type: "GET",
                            url: "/user/ajaxreg",
                            // ContentType: "application/json",

                            data: {
                                "username": username
                            },
                            success: function (data) {
                                if (data != "") {
                                    $("#msg").text("用户名不可用!");
                                } else {
                                    $("#msg").text("");
                                }


                            },
                            error: function () {
                                $("#msg").text("error");
                            }
                        })
                    }


                })

                $("#register").click(function () {
                    var username = $("#username").val();
                    //2 创建正则表达式对象
                    var usernamePatt = /^\w{5,12}$/;
                    //3 使用test方法验证
                    if (!usernamePatt.test(username)) {
                        //4 提示用户结果
                        $("#msg").text("用户名不合法！");
                        return false;
                    }
                    var password = $("#password").val();
                    if (!usernamePatt.test(password)) {
                        $("#msg").text("密码不合法！");
                        return false;
                    }
                    var confirmpwd = $("#conformpwd").val();
                    if (password != confirmpwd) {
                        $("#msg").text("确认密码和密码不一致");
                        return false;
                    }
                })
            })
            // function back() {
            //     location.href="index.html";
            //
            // }

        </script>
    </head>

    <body class="text-center">
        <form class="form-signin" th:action="@{/user/register}" name="register">
            <img class="mb-4" th:src="@{/img/bootstrap-solid.svg}" alt="" width="72" height="72">
            <h1 class="h3 mb-3 font-weight-normal" th:text="请注册">请注册</h1>
            <label class="sr-only">Username</label>
            <input type="text" id="username" name="username" class="form-control" th:placeholder="用户名（字母、数字、下划线5-12位字符）"
                   required="" autofocus="">
            <label class="sr-only">Password</label>
            <input type="password" id="password" name="password" class="form-control"
                   th:placeholder="密码（字母、数字、下划线5-12位字符）" required="">
            <input type="password" id="conformpwd" name="conformpwd" class="form-control" th:placeholder="确认密码"
                   required="">
            <p class="bg-warning" aria-hidden="true" th:text="${msg}" id="msg"></p>
            <!--            <div class="alert alert-danger" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}" id="msg" role="alert">-->
            <!--                A simple danger alert—check it out!-->
            <!--            </div>-->
            <button class="btn btn-lg btn-outline-primary btn-block" type="submit" id="register" th:text="注册">Register
            </button>
            <!--            <button class="btn btn-lg btn-outline-primary btn-block" type="button"  th:text="返回" th:onclick="'javascript:back()'">Back</button>-->
            <a class="btn btn-lg btn-outline-primary btn-block" href="/index.html" role="button">返回</a>
            <p class="mt-5 mb-3 text-muted">© 2020-2021</p>
        </form>

    </body>


</html>